<template>
  <div class="loading" v-show="isLoading">
    <img :src="imageUrl+'/img/gif/loading.gif'" alt="" class="loading-img">
  </div>
</template>

<script>
  import { imageUrl } from "../../api/url.config";

  import { mapState } from 'vuex';

  export default {
    name: "loading",
    data() {
      return {
        imageUrl
      }
    },
    computed: mapState('Tools', ['isLoading'])
  }
</script>

<style lang="scss" scoped>
  .loading {
    z-index: 99999999999;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 1);

    &-img {
      position: absolute;
      width: upx(500);
      height: upx(500);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
</style>
